<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./code/lazyLoadImg.js"></script> -->
</head>
<body>
    <!-- <div class="container">
        <p class="item1">1</p>
        <p class="item2">2</p>
        <p class="item3">3</p>
    </div> -->
    <!-- <div class="container">
        <p class="pp">haha1<span>22</span></p>
        <p class="pp">haha2</p>
        <p class="pp">haha3</p>
      </div> -->
      <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
        <li>list 5</li>
      </ul>
    <script>
        const pList = document.getElementsByTagName('p')
        // const pList = document.querySelectorAll('p')
        console.log(pList);

        // var container = document.querySelector('.container')
        // var nodes = container.childNodes
        // var p = document.createElement('p')
        // p.textContent = 'haha4'
        // container.append(p)
        // console.log('nodes', container)
        // console.log('nodes', nodes)
        // console.log('nodesLength', nodes.length)

        // var pp = document.getElementsByClassName('pp')
        // var container = document.querySelector('.container')
        // var p = document.createElement('p')
        // p.textContent = 'haha4'
        // p.className = 'pp'
        // container.append(p)
        // console.log('pp', pp)
        // console.log('container', container.childNodes)
        // console.log(document.getElementsByClassName('pp'));
        // console.log(document.querySelectorAll('p'));


        var oldUl = document.querySelectorAll('ul')[0]
        var oldLi = document.querySelectorAll('li')

        console.log(oldUl) // NodeList [body]
        console.log(oldLi.length) // 5

        var newLi = document.createElement('li')
        oldUl.appendChild(newLi)

        console.log(oldLi.length) // 5
        oldLi[oldLi.length - 1].innerHTML = '🤐'
        
        
    </script>
</body>
</html>